<template>
	<div id="answer_manage" class="container">
		<div class="content">
			<div class="title">
				<span class="title_nav">闯关管理</span>
				<span class="title_nav" v-for="item in titleNavListSecond" @click="onTitleNavClick(item)">>{{item.label}}</span>
				<span class="title_nav" v-for="item in titleNavListThird">>{{item.label}}</span>
			</div>
			<div class="nav_div">
				<div class="nav" :class="typeCla[0]" @click="selectType(0)">{{titleNavName[0]}}</div>
				<div class="nav" :class="typeCla[1]" @click="selectType(1)">{{titleNavName[1]}}</div>
				<div class="nav" :class="typeCla[2]" @click="selectType(2)">{{titleNavName[2]}}</div>
			</div>
			<div>
				<!--查看信息-->
				<passGameList ref="passGameList" v-if="typeCla[0] == 'nav_active' && !infoDetailShow" @openInfoDetail="openInfoDetail"></passGameList>
				<passGameDetail ref="passGameDetail" v-if="typeCla[0] == 'nav_active' && infoDetailShow"></passGameDetail>
				<!--题库设计-->
				<questionDesign ref="questionDesign" v-if="typeCla[1] == 'nav_active' && !questionAddEditShow && !periodAddEditShow" @openQuestionAddEdit="openQuestionAddEdit" @openPeriodAddEdit="openPeriodAddEdit"></questionDesign>
				<questionAddEdit ref="questionAddEdit" v-if="typeCla[1] == 'nav_active' && questionAddEditShow" @selectType="selectType"></questionAddEdit>
				<periodAddEdit ref="periodAddEdit" v-if="typeCla[1] == 'nav_active' && periodAddEditShow" @selectType="selectType"></periodAddEdit>
				<!--答题设置-->
				<answerSet ref="answerSet" v-if="typeCla[2] == 'nav_active'"></answerSet>
			</div>
		</div>
	</div>
</template>
<script>
	import passGameList from './subpage/passGame_list'
	import passGameDetail from './subpage/passGame_detail'
	import questionDesign from './subpage/question_design'
	import questionAddEdit from './subpage/question_add_edit'
	import periodAddEdit from './subpage/period_add_edit'
	import answerSet from './subpage/answer_set'

	var vm;
	export default {
		components: {
			passGameList,
			passGameDetail,
			questionDesign,
			questionAddEdit,
			periodAddEdit,
			answerSet
		},
		data: function() {
			return {
				title: this.$route.name,
				titleNavName: ["查看信息", "题库设计", "答题设置"],
				typeCla: ["nav_active", "", ""],
				infoDetailShow: false,
				questionAddEditShow: false,
				periodAddEditShow: false,
				titleNavListSecond: [],
				titleNavListThird: [],
			}
		},
		methods: {
			selectType: function(index) {
				vm.typeCla = ["", "", "", ""];
				vm.typeCla[index] = "nav_active";
				vm.infoDetailShow = false;
				vm.questionAddEditShow = false;
				vm.periodAddEditShow = false;

				vm.titleNavListSecond = [{
					id: index,
					label: vm.titleNavName[index]
				}];
				vm.titleNavListThird = [];
				// vm.updataTitleNavList(navList);
			},
			openInfoDetail: function(item) {
				vm.titleNavListThird = [{
					id: 0,
					label: "闯关详情"
				}];
				// vm.updataTitleNavList(navList);
				vm.infoDetailShow = true;
				this.$nextTick(() => {
					vm.$refs.passGameDetail.init(item);
				})

			},
			closeAnswerDetail: function() {
				vm.titleNavListThird = [];
				// vm.updataTitleNavList([]);
				vm.infoDetailShow = false;
				vm.$refs.passGameDetail.close();
			},
			openQuestionAddEdit: function(data) {
				let label = (data.childrenId? "修改题目" : "新建题目");
				vm.titleNavListThird = [{
					id: 0,
					label: label
				}];
				vm.questionAddEditShow = true;
				this.$nextTick(() => {
					vm.$refs.questionAddEdit.init(data);
				})
			},
			openPeriodAddEdit: function(data) {
				vm.titleNavListThird = [{
					id: 0,
					label: (data.titleId? "修改阶段" : "新建阶段")
				}];
				vm.periodAddEditShow = true;
				this.$nextTick(() => {
					vm.$refs.periodAddEdit.init(data);
				})
			},
			closeQuestionAddEdit: function() {
				// vm.updataTitleNavList([]);
				vm.titleNavListThird = [];
				vm.questionAddEditShow = false;
				vm.$refs.questionAddEdit.close();
			},
			closePeriodAddEdit: function() {
				// vm.updataTitleNavList([]);
				vm.titleNavListThird = [];
				vm.periodAddEditShow = false;
				vm.$refs.questionAddEdit.close();
			},
			updataTitleNavList: function(data) {
				vm.titleNavList = data;
			},
			onTitleNavClick: function(item) {
				vm.titleNavListThird = [];
				vm.selectType(vm.titleNavListSecond[0].id);
			}
		},
		mounted: function() {
			vm.titleNavListSecond = [{
				id: 0,
				label: vm.titleNavName[0]
			}];
			// vm.updataTitleNavList(navList);
		},
		created: function() {
			vm = this;
		}
	}
</script>
<style lang="scss">
#answer_manage {
	.el-input__inner {
		border-radius: 0.08rem;
		font-size: 0.16rem;
		color: #666666;
		height: 0.36rem !important;
		line-height: 0.36rem;
	}
	.el-input__icon {
		line-height: 0.36rem;
	}
	.input_search {
		.el-input__inner {
			background-color: rgb(247, 248, 250);
		}
	}
}
</style>
<style scoped>
	.container {
		background-color: #f3f6fb;
		min-height: 100%;
	}
	
	.content {
		/*outline: 1px solid red;*/
		width: 15.48rem;
		margin: 0 auto;
		padding-bottom: 0.48rem;
		letter-spacing: 0.01rem;
	}
	
	.title {
		font-size: 0.26rem;
		color: #141414;
		font-weight: bold;
		line-height: 0.6rem;
	}
	
	.title_nav {
		cursor: pointer;
	}
	
	.title_nav:hover {
		color: #3885f8;
	}
	
	.nav_div {
		overflow: hidden;
		padding-left: 0.1rem;
	}
	
	.nav {
		width: 1.79rem;
		line-height: 0.35rem;
		float: left;
		color: #999999;
		font-size: 0.2rem;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
	}
	
	.nav_active {
		color: #3885f8;
		border-bottom: 0.03rem solid #3885f8;
	}
	
	.contentPanel {
		background-color: white;
		border: 0.01rem solid #ededed;
		border-radius: 0.1rem;
		padding: 0 0.3rem 0.4rem 0.3rem;
		color: #666666;
	}
</style>